<template>
<div id="abc" style="background-color: #00C6FF;">
  <div  style="background-image:url(../../static/img/login-img.png);width: 650px;height: 600px; position: absolute;left: 10px;">

  </div>
  <div class="divright">
      <div class="login">
  			<h2>用户登录</h2>
  			<div class="login_box">
  				<input type="text" required  v-model="user.username" v-show="state==1" /><label v-show="state==1">账号</label>
          <input type="text" required  v-model="phone" v-show="state==2" /><label v-show="state==2">电话号码</label>
  			</div>
  			<div class="login_box">
  				<input type="password" required="required" v-model="user.userpassword" v-show="state==1" /><label v-show="state==1">密码</label>
          <input type="password" required="required" v-model="yzm" v-show="state==2" /><label v-show="state==2">验证码</label>
          <el-button type="primary" @click="sendcode()" v-show="state==2" id="getCode">获取验证码</el-button>
  			</div>
        <div>
          <a href="javascript:void(0)" @click="state=1">账号登录</a>
          <a href="javascript:void(0)" @click="state=2">短信登录</a>
        </div>
  			<a href="javascript:void(0)" v-show="state==1" @click="login()">
  				登录
  				<span></span>
  				<span></span>
  				<span></span>
  				<span></span>
  			</a>
        <a href="javascript:void(0)" v-show="state==2" @click="loginPhone()">
        	登录
        	<span></span>
        	<span></span>
        	<span></span>
        	<span></span>
        </a>
       <div  id="Login_register">
          <a href="javascript:void(0)" @click="goRegister()">注册</a>
        </div>
  		</div>
  	</div>

  		<!-- <div class="divleft">
  			<h2 style="font-family: fantasy; color: darkgoldenrod;"> 123</h2>
  		</div> -->
</div>
</template>

<script>
 export default{
   name:"login",
   data(){
   	return{
       user:{
         username:"",
         userpassword:""
       },
       yzm:"",
       phone:"",
       state:1
   	}
   },
   methods:{
     //账号密码登录
   	login(){
      if(this.user.username!=null && this.user.username!=""){
        if(this.user.userpassword !=null && this.user.userpassword!=""){
          let param = new URLSearchParams();
           param.append("username",this.user.username);
           param.append("password",this.user.userpassword)
           // alert(param)
          this.$http.post("/account/login",param).then(resp=>{
          	console.log(resp)
          	if (resp.data.code==200) {
          		alert(resp.data.message);
              // this.$message({
              //   message: '登录成功',
              //   type: 'success'
              // });
               localStorage.setItem("userName",resp.data.accountName)
               localStorage.setItem("user",JSON.stringify(resp.data))
          		this.$router.push("/index")
          	} else{
          		alert("登录失败,"+resp.data.message)
          		location.reload()//刷新当前页面
          	}
          })
        }else{
          alert("密码不能为空")
        }
      }else{
        alert("账号不能为空")
      }
   	},
    //获取验证码
     sendcode(){
       if(this.phone!=null && this.phone!=""){
         this.$http.get("/account/sendCode",{
           params:{
             phone:this.phone
           }
         }).then(resp=>{
         	console.log(resp)
           alert(resp.data.message)
         })
       }else{
         alert("手机号不能为空")
       }
     },
     //验证码登录
     loginPhone(){
       if(this.phone!=null && this.phone!=""){
         if(this.yzm !=null && this.yzm!=""){
            let param = new URLSearchParams();
            param.append("phone",this.phone);
            param.append("code",this.yzm)
            this.$http.post("/phoneLogin",param).then(resp=>{
            	console.log(resp)
              if(resp.data.code==200){
                alert("登录成功")
                localStorage.setItem("user",JSON.stringify(resp.data))
                // sessionStorage.setItem("token","woniu-user")
                this.$router.push("/index")
                // this.$router.push("/TeacherAdministrator")//跳转管理页面
              }else{
               	location.reload()//刷新当前页面
              }
            })
         }else{
           alert("验证码不能为空")
         }
       }else{
         alert("手机号不能为空")
       }
     },
     goRegister(){
       this.$router.push("/Register")//去登录页面
     }
   }
 }
</script>

<style>
 * {
 	/* 初始化 清除页面元素的内外边距 */
 	padding: 0;
 	margin: 0;
 	/* 盒子模型 */
 	/* box-sizing: border-box; */
 }
 #abc {
 	/* 弹性布局 让页面元素垂直+水平居中 */
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	/* 让页面始终占浏览器可视区域总高度 */
 	height: 100vh;
 	/* 背景渐变色 */
 	/* background: linear-gradient(#fff, #999b9e); */
 }
 .login {
 	/* 弹性布局 让子元素称为弹性项目 */
 	display: flex;
 	/* 让弹性项目垂直排列 原理是改变弹性盒子的主轴方向 父元素就是弹性盒子 现在改变后的主轴方向是向下了 */
 	flex-direction: column;
 	/* 让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下 交叉轴的方向是与主轴垂直 交叉轴的方向是向右 */
 	align-items: center;
 	width: 400px;
 	padding: 40px;
 	background-color: rgba(0, 0, 0, 0.2);
 	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
 	float:right;
   position: absolute;
       left: 885px;
       top: 140px;
 }
 .login h2 {
 	color: #fff;
 	margin-bottom: 30px;
 }
 .login .login_box {
 	/* 相对定位 */
 	position: relative;
 	width: 100%;
 }
 .login .login_box input {
 	/* 清除input框自带的边框和轮廓 */
 	outline: none;
 	border: none;
 	width: 100%;
 	padding: 10px 0;
 	margin-bottom: 30px;
 	color: #fff;
 	font-size: 16px;
 	border-bottom: 1px solid #fff;
 	/* 背景颜色为透明色 */
 	background-color: transparent;
 }
 .login .login_box label {
 	position: absolute;
 	top: 0;
 	left: 0;
 	padding: 10px 0;
 	color: #fff;
 	/* 这个属性的默认值是auto 默认是这个元素可以被点击 但是如果我们写了none 就是这个元素不能被点击 , 就好像它可见但是不能用 可望而不可即 */
 	/* 这个就是两者的区别 */
 	pointer-events: none;
 	/* 加个过渡 */
 	transition: all 0.5s;
 }
 /* :focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器 去找与input相邻的兄弟label */
 /* :valid 选择器是判断input框的内容是否合法,如果合法会执行下面的属性代码,不合法就不会执行,我们刚开始写布局的时候给input框写了required 我们删掉看对比 当没有required的话input框的值就会被认为一直合法,所以一直都是下方的样式 ,但是密码不会,密码框内的值为空,那么这句话局不合法,required不能为空 当我们给密码框写点东西的时候才会执行以下代码*/
 .login .login_box input:focus + label,
 .login .login_box input:valid + label {
 	top: -20px;
 	color: #f7ae10;
 	font-size: 12px;
 }
 .login a {
 	overflow: hidden;
 	position: relative;
 	padding: 10px 20px;
 	color: #f7ae10;
 	/* 取消a表现原有的下划线 */
 	text-decoration: none;
 	/* 同样加个过渡 */
 	transition: all 0.5s;
 }
 .login a:hover {
 	color: #fff;
 	border-radius: 5px;
 	background-color: #f7ae10;
 	box-shadow: 0 0 5px #f7ae10, 0 0 25px #f7ae10, 0 0 50px #f7ae10,
 		0 0 100px #f7ae10;
 }
 .login a span {
 	position: absolute;
 }
 .login a span:first-child {
 	top: 0;
 	left: -100%;
 	width: 100%;
 	height: 2px;
 	/* to right 就是往右边 下面的同理 */
 	background: linear-gradient(to right, transparent, #f7ae10);
 	/* 动画 名称 时长 linear是匀速运动 infinite是无限次运动 */
 	animation: move1 4s linear infinite;
 }
 .login a span:nth-child(2) {
 	right: 0;
 	top: -100%;
 	width: 2px;
 	height: 100%;
	background: linear-gradient(transparent, #f7ae10);
 	/* 这里多了个0.25s其实是延迟时间 */
 	animation: move2 4s linear 0.25s infinite;
 }
 .login a span:nth-child(3) {
 	right: -100%;
 	bottom: 0;
 	width: 100%;
 	height: 2px;
 	background: linear-gradient(to left, transparent, #f7ae10);
 	animation: move3 4s linear 0.5s infinite;
 }
 .login a span:last-child {
 	left: 0;
 	bottom: -100%;
 	width: 2px;
 	height: 100%;
 	background: linear-gradient(#f7ae10, transparent);
 	animation: move4 4s linear 0.75s infinite;
 }
 /* 动画 */
 @keyframes move1 {
 	0% {
 		left: -100%;
 	}
 	50%,
 	100% {
 		left: 100%;
 	}
 }
 @keyframes move2 {
 	0% {
 		top: -100%;
 	}
 	50%,
 	100% {
 		top: 100%;
 	}
 }
 @keyframes move3 {
 	0% {
 		right: -100%;
 	}
 	50%,
 	100% {
 		right: 100%;
 	}
 }
 @keyframes move4 {
 	0% {
 		bottom: -100%;
 	}
 	50%,
 	100% {
 		bottom: 100%;
 	}
 }

  .divleft{
 	float:left; width:20%;
 	 width: 50%;
 	 margin-left: 200px;


  }
 #getCode{
   position: absolute;
   right: -3px;
 }
 #Login_register{
   position: relative;
   left: 150px;
   top: 10px;
 }
</style>
